নেভিগেশনবার হচ্ছে কিছু লিংকের লিস্ট। একটি নেভিগেশনবার যেহেতু কিছু লিঙ্কের লিস্ট, তাই আমরা এই লিস্ট তৈরি করার জন্য < ul> এবং < li> ট্যাগ ব্যবহার করবোঃ

kt_satt_skill_example_id=1211

কিছু স্টাইল যোগ করুনঃ

kt_satt_skill_example_id=1218

উদাহরণের বর্ণনাঃ

• list-style-type: none; - লিস্টের বুলেট চিহ্নকে মুছে দেয়। নেভিগেশনবারে বুলেট চিহ্ন দেখতে খারাপ দেখায়
• ব্রাউজারের ডিফল্ট সেটিংস পরিবর্তন করার জন্য margin: 0; and padding: 0; সেট করুন

উপরের কোডটি হরিজন্টাল ও ভার্টিকাল দুই ধরনের নেভিগেশন বারের জন্য মানসম্মত কোড।

ভার্টিকাল নেভিগেশন বার

ভার্টিকাল নেভিগেশনবার তৈরির জন্য আপনি লিস্টের < a> এলিমেন্টকে স্টাইল করতে পারেন, এই জন্য উপরের কোডের সাথে নিচের অংশ ব্যবহার করতে হয়ঃ

kt_satt_skill_example_id=1224

উদাহরণের বর্ণনাঃ

• display: block; - লিঙ্কগুলোকে ব্লক এলিমেন্ট এবং পুরো লিঙ্ক এরিয়াকে ক্লিকযোগ্য করে, এবং ইহা আমাদেরকে অতিরিক্ত স্টাইল করতে সাহায্য করে
• width: 80px; - ব্লক এলিমেন্ট পুরো প্রস্থ ডিফল্ট আকারে নিয়ে নেয়। আমরা ৬০ পিক্সেল প্রস্থ নির্ধারণ করে দিয়েছি

উপরের কোডের পরিবর্তে আপনি নিচের মত করেও লিখতে পারেনঃ

kt_satt_skill_example_id=1225

ভার্টিকাল নেভিগেশন বারের উদাহরণ

• হোম
• সার্ভিস
• যোগাযোগ
• সম্পর্কে

একটি সাধারণ নেভিগেশনবারের উদাহরণঃ

kt_satt_skill_example_id=1226

এক্টিভ/কারেন্ট নেভিগেশন লিংক

ইউজারকে বুঝানোর জন্য একটি "active" ক্লাস যোগ করে দিনঃ

kt_satt_skill_example_id=1227

সেন্টার এলাইন লিংক এবং বর্ডার যোগ

লিংককে মাঝে আনতে < li> অথবা < a> এলিমেন্টে text-align:center ব্যবহার করুন।

নেভিগেশনবারের চারপাশে বর্ডার দিতে < ul> এর মধ্যে border প্রোপার্টি দিন। নেভিগেশনবারের মাঝে বর্ডার দিতে <li> এলিমেন্টে border-bottom ব্যবহার করতে হবেঃ

• হোম
• সার্ভিস
• যোগাযোগ
• সম্পর্কে
• kt_satt_skill_example_id=1229

সম্পূর্ণ দৈর্ঘ্যের ফিক্সড ভার্টিকাল নেভিগেশনবার

একটি সম্পূর্ণ দৈর্ঘ্যের ফিক্সড ভার্টিকাল নেভিগেশনবার তৈরি করিঃ

kt_satt_skill_example_id=1232

দ্রষ্টব্যঃ মোবাইলে এই উদাহরণটি ঠিকভাবে নাও দেখাতে পারে।

হরিজন্টাল নেভিগেশন বার

হরিজন্টাল নেভিগেশনবার তৈরির ২টি পদ্ধতি আছে। inline, float লিস্ট স্টাইল ব্যবহার করে।

ইনলাইন লিস্ট আইটেম

< li> এলিমেন্টকে ইনলাইন ডিফাইন করেঃ

kt_satt_skill_example_id=1234

উদাহরণের বর্ণনাঃ

• display: inline; - ডিফল্টভাবে লিস্ট আইটেমগুলো ব্লক এলিমেন্ট হিসেবে থাকে। আমরা এখানে লিস্টকে একই লাইনে দেখানোর জন্য আইটেমের উভয় পাশের লাইনব্রেক সরিয়ে দিলাম

ফ্লোটিং লিস্ট আইটেম

float ব্যবহার করেও হরিজন্টাল নেভিগেশনবার তৈরি করা যায়ঃ

kt_satt_skill_example_id=1237

উদাহরণের বর্ণনাঃ

• float: left; ব্যবহার করে ব্লক এলিমেন্টকে একটির পাশে আরেকটিকে রাখা হয়েছে
• display: block; লিঙ্কগুলোকে ব্লক এলিমেন্ট হিসেবে এবং সম্পূর্ণ এড়িয়াকে ক্লিকযোগ্য করে তোলে
• padding: 5px; সৌন্দর্যের জন্য ব্লক এলিমেন্টগুলোর চারপাশে প্যাডিং ডিফাইন করা হয়েছে
• background-color: aqua; রঙয়ের ব্যাকগ্রাউন্ড কালার দেয়া হল

হরিজন্টাল নেভিগেশন বারের উদাহরণ

একটি সাধারণ হরিজন্টাল নেভিগেশনবার তৈরি করে দেখানো হলোঃ

kt_satt_skill_example_id=1243

এক্টিভ/কারেন্ট নেভিগেশন লিংক

ইউজারকে বুঝানোর জন্য একটি "active" ক্লাস যোগ করে দিনঃ

kt_satt_skill_example_id=1248

রাইট-এলাইন লিংক

লিস্ট আইটেমে float:right; ব্যবহার করে রাইট-এলাইন লিংক তৈরি করা হলঃ

kt_satt_skill_example_id=1250

লিংক ডিভাইডার

< li> এর মধ্যে border-right প্রোপার্টি যুক্ত করে লিঙ্ক ডিভাইডার তৈরি করা হয়ঃ

kt_satt_skill_example_id=1252

ফিক্সড নেভিগেশন বার

ইউজার যদি পেজকে স্ক্রল করে তবুও নেভিগেশন বার পেজের উপরে অথবা নিচে ফিক্সড থাকবেঃ

kt_satt_skill_example_id=1258

kt_satt_skill_example_id=1261

বিঃদ্রঃ মোবাইলে এই উদাহরণটি ঠিকভাবে নাও দেখাতে পারে।

বর্ডারসহ হরিজন্টাল নেভিগেশনবার

হালকা ধূসর বর্ডারসহ একটি ধূসর হরিজন্টাল নেভিগেশন বারের উদাহরণঃ

kt_satt_skill_example_id=1264